課程目的:

這次的內容是當滑鼠移動到對應的標籤，會淡入資訊卡
作品實做

本次功能實作重點：

• 監聽dom元素
• handleEnter函式邏輯
• leaveEnter函式邏輯

監聽dom元素

      const li = document.querySelectorAll(".cool > li");
      const dropdownBackground = document.querySelector(".dropdownBackground");
      const nav = document.querySelector(".top");

handleEnter函式邏輯

 function handleEnter() {
        this.classList.add("trigger-enter");//當點擊增加display:blobk

        setTimeout(() => {
          //如果有包含trigger-enter則添加trigger-enter-active
          this.classList.contains("trigger-enter") &&
            this.classList.add("trigger-enter-active");
        }, 100);//設定100毫秒之後如果classList包含trigger-enter並且

        const dropdown = this.querySelector(".dropdown"); //選取當前文字內容 
        dropdownBackground.classList.add("open"); 
        const { width, height, top, left } = dropdown.getBoundingClientRect();
        //取得dropdown的座標
        let navRact = nav.getBoundingClientRect();
        //取得導覽列座標
        dropdownBackground.style.top = top - navRact.top + "px"; //設定background位置
        dropdownBackground.style.left = left + "px";
        dropdownBackground.style.width = width + "px";
        dropdownBackground.style.height = height + "px";
      }
      
         li.forEach((e) => {
        e.addEventListener("mouseenter", handleEnter);
      });

leaveEnter函式邏輯

//當鼠標離開移除相關class
      function leaveEnter() {
        this.classList.remove("trigger-enter");
        this.classList.remove("trigger-enter-active");

        const dropdown = this.querySelector(".dropdown");
        dropdownBackground.classList.remove("open");
      }
  li.forEach((e) => {
        e.addEventListener("mouseleave", leaveEnter);
      });

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 26：Stripe Follow Along Nav
JS30